<template>
  <div class="identity-info">
    <div style="position: relative;width:100%;height:50px;">
      <van-nav-bar
        fixed
        title="身份证认证"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="slider-box">
      <div class="slider">
        <div class="slider-bar"><div class="slider-button">75%</div></div>
      </div>
    </div>
    <div class="identity-box">
      <div class="left-front">
        <p class="tit">身份证人像面</p>
        <div class="Id-photo-z" @click="photographZ">
          <div :class="{'bg': identityZ }" style="width:100%;height:100%;position:absolute;top:0">
            <img class="left-img" :src="identityZImg" v-if="identityZ" />
          </div>
          <div style="position:relative;z-index:100;">
            <img class="Cell-Icon" src="../../assets/Cell-Icon.png" alt="">
            <p class="hint-text" :style="identityZ&&'color:#fff'">{{identityZ?'重新拍摄':'立即拍摄'}}</p>
          </div>
        </div>
      </div>
      <div class="reverse-side">
        <p class="tit">身份证国徽像面</p>
        <div class="Id-photo-f" @click="photographF">
          <div :class="{'bg': identityF }" style="width:100%;height:100%;position:absolute;top:0">
              <img class="right-img"  :src="identityFImg" v-if="identityF"/>
          </div>
          <div style="position:relative;z-index:100;">
            <img class="Cell-Icon" src="../../assets/ag.png" alt="">
            <p class="hint-text" :style="identityF&&'color:#fff'">{{identityF?'重新拍摄':'立即拍摄'}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="text-left" v-if="name||idNumber">
      <van-cell-group>
        <van-field label="真实姓名" input-align="right" v-model="name" />
        <van-field label="身份证号" input-align="right" v-model="idNumber" />
        <!-- <van-cell title="身份证号" :value="resultInfoF.issueAuthority" /> -->
      </van-cell-group>
    </div>
    <van-button class="btn-next" round size="normal" :disabled="!(identityZ&&identityF)" @click="nextClick">下一步</van-button>

    <!-- <van-cell-group>
      <van-field
        v-model="a"
        type="textarea"
        autosize
      />
    </van-cell-group> -->
  </div>
</template>

<script>
import { Cell, CellGroup, Button, Toast, Field, Dialog, NavBar } from 'vant';
export default {
  components:{
    [Cell.name]:Cell,
    [CellGroup.name]:CellGroup,
    [Button.name]:Button,
    [Toast.name]:Toast,
    [Field.name]:Field,
    [Dialog.name]:Dialog,
    [NavBar.name]:NavBar,
  },
  data(){
    return{
      identityZ:false,//有无照片状态
      identityF:false,//有无照片状态
      identityZImg:'',//正面照片
      resultInfoZ:'',//正面信息
      identityFImg:'',//反面照片
      resultInfoF:'',//反面信息
      token:'',
      name:'',
      idNumber:'',
      // a:''
    }
  },
  mounted(){
    _hmt.push(['_trackPageview', '/identity-info']);
    this.$util.goBack(Dialog);
    Toast.loading({duration:1000,mask: false,message: '加载中...'});
    let _this =this;
    window.resultIdCard=(typeIdCard,result,img)=>{
      // alert(typeIdCard)
      if(typeIdCard==0){
// alert(JSON.stringify(result))
        Toast.clear();
        this.identityZImg = 'data:image/png;base64,'+img
        this.identityZ = true;
        // _this.a='data:image/png;base64,'+img
        let data = JSON.parse(result);
        let resultInfoZ={
          birthday:data.birthday.words,
          wordsResultNumber:data.wordsResultNumber,
          ethnic:data.ethnic.words,
          address:data.address.words,
          gender:data.gender.words,
          name:data.name.words,
          idNumber:data.idNumber.words,
          direction:data.direction,
        }
        // _this.a='data:image/png;base64,'+img
        // alert(resultInfoZ.name)
        this.name=resultInfoZ.name
        this.idNumber=resultInfoZ.idNumber;
        this.resultInfoZ = resultInfoZ;
      }else if(typeIdCard==1){

        Toast.clear();
        this.identityFImg = 'data:image/png;base64,'+img;
        this.identityF = true;

        let data = JSON.parse(result);
        let resultInfoF={
          expiryDate:data.expiryDate.words,
          signDate:data.signDate.words,
          issueAuthority:data.issueAuthority.words,

        }

        this.resultInfoF = resultInfoF;

      }
      Toast.clear();
    }

    this.$util.getUser().then(token=>{
       _this.token=token;
      console.log(token)

    })
    // this.a = this.$util.bankrollCode/
  },
  methods:{
    onClickLeft(){
      this.$util.url('/HomeBefore','首页',Dialog);
    },
    regular(st){
      let re = /{(.*?)}/g;
      let str = re.exec(st)
      str = str[0].replace(/=/g,":");

      str = str.replace(/([\$\w]+)\s*:/g, function(_, $1){return '"'+$1+'":'});
      str = str.replace(/\s*:([\$\w]+|[\$\u4E00-\u9FA5\\s]+)/g, function(_, $1){return ':"'+$1+'"'});
      str = str.replace(/:,/g, ':"",');

      return str
    },
    photographZ(){
      window.control.getIdcardFront();
      Toast.loading({
        duration: 3000,
        message: '扫描中...'
      });
    },
    photographF(){
      if(!this.identityZImg){
        Toast('先扫描正面!')
        return;
      }
      window.control.geIdcardBack();
      Toast.loading({
        duration: 3000,
        message: '扫描中...'
      });
    },
    nextClick(){
      let _this =this;
      let signDate='';
      let expiryDate='';
      // alert(this.resultInfoF.signDate)
      // alert(this.resultInfoF.expiryDate)
      if(!(this.resultInfoF.signDate||this.resultInfoF.expiryDate)){
        Toast('获取不到身份证有效期！')
        return;
      }
      signDate =this.resultInfoF.signDate.substring(0,4)+'.'+this.resultInfoF.signDate.substring(4,6)+'.'+this.resultInfoF.signDate.substring(6)
      if(Number(this.resultInfoF.expiryDate)){
       expiryDate =this.resultInfoF.expiryDate.substring(0,4)+'.'+this.resultInfoF.expiryDate.substring(4,6)+'.'+this.resultInfoF.expiryDate.substring(6)
      }else{
        expiryDate = this.resultInfoF.expiryDate;
      }
// alert(signDate+'-'+expiryDate)
// alert(this.$util.bankrollCode)
// alert(this.idNumber)
// alert(this.resultInfoF.issueAuthority)
// alert(this.name)
// alert(this.resultInfoZ.ethnic)
// alert(this.resultInfoZ.gender)
// alert(this.identityFImg)
// alert( this.identityZImg)
      // 身份信息保存在本地
      let id = {
        name:this.name,
        idCard:this.idNumber
      }
      id = JSON.stringify(id)
      this.$util.setSaveVlues('id',id);
      // let a='http://a.hiphotos.baidu.com/image/h%3D300/sign=bb325138dc58ccbf04bcb33a29dabcd4/aa18972bd40735faee21b63393510fb30e240862.jpg'

      this.$api.post('/borrowBefore/v1/idcardAuth',{
        "backFile": this.identityFImg,
        "frontFile": this.identityZImg,
        //  "backFile": a,
        // "frontFile": a,
        "bankrollCode": this.$util.bankrollCode,
        "idCard": this.idNumber,
        "issuedBy": this.resultInfoF.issueAuthority,
        "name": this.name,
        "nation":this.resultInfoZ.ethnic,
        "sex": this.resultInfoZ.gender,
        "validDate": signDate+'-'+expiryDate

        // "backFile":img,
        // "frontFile": img,
        // "bankrollCode": 'SXJR',
        // "idCard": '342201199312047966',
        // "issuedBy": '宿州市公安局桥分局',
        // "name": '张咪',
        // "nation":'汉',
        // "sex": '女',
        // "validDate": '2012.01.01-2020.01.01'
      },s=>{
        console.log(s)
        let data=s.module;
        // alert(JSON.stringify(data))
        if(s.module.step ==40){
          // _this.$router.push({ path: '/FaceRecognition'})
          _this.$util.url('/FaceRecognition','人脸识别')
        }else{

        }
        // 审核失败
        if(s.resultCode == '20005'){
          _this.$util.url('/HomeBefore','首页')
        }
      },f=>{
        // alert('失败'+JSON.stringify(f))
        // alert(JSON.parse(f))
        if(f.resultCode == '20005'||f.resultCode=='10000'||f.resultCode=='10003'||f.resultCode=='10001'||f.resultCode=='10002'){
          _this.$util.url('/HomeBefore','首页')
        }else{
          Toast(f.errorMessage);
        }
        //  alert(s.JSON.parse(f))
      },{
        'Content-Type': 'application/json',
        'Accept': "*/*",
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
        'token':this.token
      })
    }

  }
  // var a=
}
</script>

<style scoped lang="scss">
  /***
  * 产品主题颜色需求
  * #FF8024 按钮 突出文字 ico
  * #FFD500 B辅助色
  * #FFEC9C c辅助色
  * #1D0F00 重要文字
  * #41424E 副标题段落
  * #797A79 次要文字
  * #A9AAA9 不可点击
  * #E6E6E6 分割线 描边
  * #F6F7F6 背景
  * #6699CC 链接
  */
.identity-info{
  width:100%;
  height:100%;
  background: #F6F7F6;
}
.slider-box{
  position: fixed;
  top:50px;
  z-index:100;
  width:100%;
  height:24px;
  background: #F6F7F6;
}
.slider{
  width:100%;
  height:6px;
  margin-top:9px;
  background: #E6E6E6;
  .slider-bar{
    position: relative;
    width:75%;
    height:6px;
    background: #FF8024;
  }
  .slider-button{
    position: absolute;
    top:-4px;
    right:-13px;
    width:30px;
    height:14px;
    background: #fff;
    border-radius: 2px;
    font-size:10px;
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.10);
    color:#FF8024;
  }
}
.identity-box{
  display: flex;
  flex-direction: row;
  justify-content:center;
  align-items: center;
  width:100%;
  height:180px;
  margin-top:20px;
  margin-bottom:9px;
  background:#fff;
  .left-front,.reverse-side{
    width:150px;
    height:135px;
    margin:0 13px;
  }
  .tit{
    font-size:16px;
    line-height: 22px;
    color:#1D0F00;
  }
  .Id-photo-z,.Id-photo-f{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width:150px;
    height:96px;
    margin-top:17px;
    border-radius:6px;
    background: rgba(0,0,0,0.04);
  }
  .Id-photo-z{
    background:url(../../assets/renxiang.png);
    background-size:100% 100%;
  }
  .Id-photo-f{
    background:url(../../assets/guohui.png);
    background-size:100% 100%;
  }
  .left-img,.right-img{
    position: absolute;
    left:0;
    right:0;
    width:150px;
    height:96px;
    border:none;

  }
  .Cell-Icon{
    width:44px;
    height:44px;
  }
  .hint-text{
    height:18px;
    margin-top:5px;
    font-size:13px;
    color:#529FE2;
  }
  .bg .hint-text{
    color:#fff;
  }
  .bg::after{
    position:absolute;
    left:0;
    top:0;
    display:block;
    content:'';
    width:150px;
    height:96px;
    background: rgba(0,0,0,0.4);
  }
}
.btn-next{
  width:80%;
  margin-top:20px;
  background: #FF8024;
  color:#fff;
}
</style>

